<template>
  <div class="container">
    <div class="panel pad-t-18 pad-b-22 pad-l-20 pad-r-20" :class="'type-' + order.orderStatus" @click="queryExpress">
      <h1 class="font-w font-16">{{orderStatusText}}</h1>
      <div class="font-12 mar-t--2">{{orderStatusTips}}</div>
      <van-icon v-if="(order.orderStatus === 2) || (order.orderStatus === 3) || (order.orderStatus === 4)" name="arrow" class="arrow-right" size="20px" color="#fff"/>
    </div>
    <div ref="address" class="mar-t--4">
      <div class="panel add-box pad-l-10 pad-r-10 pad-t-7 pad-b-7">
        <div class="flex v-align-c">
          <div class="mar-r-8">
            <img v-if="fileSpace" mode="widthFix" class="width-19 height-19"
              :src="fileSpace + '/images/local-icon-5.png'"/>
          </div>
          <div class="flex-col flex-item">
            <div class="font-12">
              <label class="font-w">{{ nicknameAdd }}</label>
              <label class="mar-l-8">{{ phoneAdd }}</label>
            </div>
            <div class="flex v-align-c">
              <div class="font-gray font-12 flex-item mar-r-10">{{ addressAdd }}</div>
              <label class="action-btn font-12" @click="$pt.setClipboardData({data: nicknameAdd + ' ' + phoneAdd + ' ' + addressAdd})">复制</label>
            </div>
          </div>
        </div>        
      </div>
      <div class="add-line-bg mar-t--10 mar-b-10"></div>
    </div>
    <div v-if="order.orderGoodsList" class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8">
      <div class="flex mar-b-10 pad-b-3 border-b-less"
        v-for="(item, index) in order.orderGoodsList" :key="index" @click="goDetail(item)">
        <div class="mar-r-10">
          <img v-if="item.goodsImageUrl" :src='item.goodsImageUrl' class="img-item"/>
        </div>
        <div class="flex-item">
          <div class="flex">
            <div class="flex-item">
              <div class="goods-title mar-t--2">{{item.goodsTitle}}</div>
              <div class="goods-prop font-color-9 font-12 mar-t-3 mar-b-7">{{ item.skuDetail }}</div>
              <div class="height-18 flex">
                <div v-if="item.memberIncome && Number(item.memberIncome) > 0" class="font-12 income-bar height-17">
                  <div class="flex flex-center height-17">赚{{ item.memberIncome }}元</div>
                </div>
                <div class="flex-item"></div>
                <template v-if="urlFrom !== 'myDistribution'">
                  <template v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 1 && order.orderStatus !== 4">
                    <div v-if="item.afterSaleGoodsNum" class="font-12 font-return-num">已退{{ item.afterSaleGoodsNum }}件</div> 
                  </template>
                </template>
              </div>
              <div class="flex font-13">
                <div class="font-black flex-item">
                  <div class="flex v-align-c font-16 price-col-n">
                    <span class="flex-item">¥{{ item.goodsPrice }}</span>
                    <span>×{{ item.goodsNum }}件</span>
                  </div>
                </div>
              </div>
              <!--  退款关闭: -3、4、3（数量全退完）
                  退款：-2、-1、3(数量未退完)、''
                  退款中：0、1、2 -->
              <div class="flex mar-t-5">
                <div class="flex-item"></div>
                <template v-if="urlFrom !== 'myDistribution'">
                  <template v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 1 && order.orderStatus !== 4 && order.orderStatus !== 20">
                    <div @click.stop="linkToDetail(item)"
                      v-if="!item.afterSaleGoodsNum && item.afterSaleStatus===0 || !item.afterSaleGoodsNum && item.afterSaleStatus===1 || !item.afterSaleGoodsNum && item.afterSaleStatus===2">
                      <div class="action-btn font-13 mar-b-7">退款中</div>
                    </div>
                    <div class="action-btn font-13 mar-b-7"
                      v-else-if="item.afterSaleStatus===-3 || item.afterSaleStatus===4 || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum===item.goodsNum))">退款关闭</div>
                    <div @click.stop="linkToApply(item)"
                      v-else-if="!statusIs && item.afterSaleStatus===-2 || !statusIs && item.afterSaleStatus===-1 || !statusIs && !item.afterSaleStatus || !statusIs && (item.afterSaleStatus===3 && (item.afterSaleGoodsNum<item.goodsNum))">
                      <div class="action-btn font-13 mar-b-7">退款</div>
                    </div>
                  </template>
                </template>
                <div v-if="order.cancelFlag === 1" class="action-btn font-13 mar-b-7" @click.stop="linkToDetail(item)">退款中</div>
              </div>
            </div>            
          </div>
        </div>
      </div>
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8">
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span class="flex-item">商品小计</span>
        <label>¥{{goodsTotalPrice}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c" v-if="order.couponReduceAmount !== '0.00'">
        <span class="flex-item">优惠券</span>
        <label>- ¥{{order.couponReduceAmount}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span class="flex-item">运费</span>
        <label>¥{{order.freight}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span class="flex-item">实付费</span>
        <label class="font-red">¥{{order.actualPrice}}</label>
      </div>
      <div v-if="personalType !== '0'" class="pad-t-2 pad-b-2 flex v-align-c">
        <span class="flex-item">分销佣金</span>
        <label class="font-red">¥{{order.memberCommission}}</label>
      </div>
      <div class="flex v-align-c font-16 border-t mar-t-8 pad-t-6 pad-b-3">
        <span class="flex-item">订单总价</span>
        <label class="font-red">¥{{ order.actualPrice }}</label>
      </div>
    </div>
    <!-- 身份为店长与分销商时展示，买家订单入口进来不展示 -->
    <div class="panel pad-l-14 pad-r-14 font-13 font-color-9" v-if="shareType || statusIs">
      <!-- 只在店长身份时展示 -->
      <div class="height-50.5 flex v-align-c border-b" v-if="statusIs">
        <div class="flex-item v-align-c">
          <span>总佣金：</span>
          <span>￥{{totalCommission}}</span>
        </div>
        <div>
          <span>我的佣金：</span>
          <span class="color-ac">￥{{order.memberCommission}}</span>
        </div>
      </div>
      <div v-if="order.shareMemberId">
        <div class="height-50.5 flex v-align-c">
          <div class="flex-item v-align-c">
            <span>分销商：</span>
            <img class="avatar-img mar-l-7 mar-r-11" v-if="order.shareMemberAvatar" :src="order.shareMemberAvatar" alt="">
            <label class="font-c-56 font-15 line-1">{{order.shareMemberNickname}}</label>
          </div>
          <div>
            <span>分销佣金：</span>
            <span>￥{{order.shareCommission}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-8 pad-b-8 font-gray">
      <div class="pad-t-2 pad-b-2 flex flex-between">
        <div class="flex v-align-c">
          <span>订单编号：</span>
          <label>{{order.orderNo}}</label>
        </div>
        <div class="copy-btn" @click="$pt.setClipboardData({data: order.orderNo})">复制</div>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span>下单时间：</span>
        <label>{{order.createTime}}</label>
      </div>
      <div v-if="order.payTime" class="pad-t-2 pad-b-2 flex v-align-c">
        <span>支付时间：</span>
        <label>{{order.payTime}}</label>
      </div>
      <div class="pad-t-2 pad-b-2 flex v-align-c">
        <span>订单状态：</span>
        <label>{{orderStatusType}}</label>
      </div>
      <div v-if="order.deliveryTime" class="pad-t-2 pad-b-2 flex v-align-c">
        <span>发货时间：</span>
        <label>{{order.deliveryTime}}</label>
      </div>
      <div v-if="order.receivedTime" class="pad-t-2 pad-b-2 flex v-align-c">
        <span>收货时间：</span>
        <label>{{order.receivedTime}}</label>
      </div>      
    </div>
    <div class="panel pad-l-14 pad-r-14 pad-t-15 pad-b-15 height-86 font-color-9 font-13">
      <span>买家留言：</span><span class="font-color">{{order.customerComment}}</span>
    </div>
    <!-- 是买家且是我的订单入口进来且运营总后台客服增值功能开启时展示 -->
    <div class="customer-bar panel pad-t-9 pad-b-9 flex v-align-c">
      <div class="flex-item pos-rel" v-if="enterpriseCustomerServiceAuthority === 1">
        <!-- 企业客服 -->
        <button v-if="customerServiceType === 2" open-type="contact" class="contactBtn hidden-submit button-icon"
        :session-from="'7moor|'+ userNickname + '|' + memberAvatar +'|'+ customField"></button>
        <!-- 小B客服 -->
        <div v-if="customerServiceType === 1" @click="goServiceToB(order)" class="contactBtn hidden-submit button-icon"></div>
        <div class="flex flex-center">
          <img v-if="fileSpace" :src="fileSpace + '/images/customer-icon-2.png'" alt="" class="width-21 height-21 mar-r-6">
          <span class="font-16">联系客服</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="flex-item" @click="$pt.makePhoneCall({phoneNumber: order.memberPhone})">
        <div class="flex flex-center">
          <img v-if="fileSpace" :src="fileSpace + '/images/customer-icon-3.png'" alt="" class="width-21 height-21 mar-r-6">
          <span class="font-16">拨打电话</span>
        </div>
      </div>
    </div>
    <div class="pad-t-30"></div>
  </div>
</template>

<script>
  import {
    getProjectOrder, payProjectOrder
  } from '@/api/distribution'
  import {
    cancelOrder, doReceiveGoods, checkCancelPaidOrder
  } from '@/api/personal'
  import { listEnterpriseMessageConfig, getAuthority } from '@/api/common'

  export default {
    data() {
      return {
        customerInfo: {
          nickname: '',
          phone: '',
          address: ''
        },
        nicknameAdd: '',
        phoneAdd: '',
        addressAdd: '',
        memberAvatar: '',
        customField: {},
        userNickname: '',
        order: {},
        goodsTotalPrice: '0.00',
        orderStatusText: '',
        orderStatusTips: '',
        orderStatusType: '',
        personalType: '',
        submitStatus: false,
        shareType: false, // 区分分销商与买家
        statusIs: false, // 区分买家卖家
        orderFrom: 0,
        goodsListLen: 0,
        urlFrom: '',
        messageIds: [],
        enterpriseCustomerServiceAuthority: true, // 企业客服增值功能 0关闭 1开启
        customerServiceFlag: 0, // 是否开启客服权限 0：关闭 1：开启
        customerServiceType: '', // 客服类型 1：小B客服 2：企业客服
        serviceType: 0 // 客服类型 1：小B客服 2：企业客服
      }
    },
    computed: {
      isIPhoneX() {
        return this.$utils.isIPhoneX()
      },
      totalCommission() {
        return (Number(this.order.memberCommission) + Number(this.order.shareCommission)).toFixed(2)
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {

    },
    onReady() {
      console.log(3)
      this.urlFrom = this.getCurrentPage().query.urlFrom
      // 售后页面，返回订单详情时，需获取订单最新的售后状态
      if (this.$pt.getStorageSync('refundType')) {
        this.initEls()
      }
      this.initEls()
      this.getAuthority()
      this.userNickname = this.$pt.getStorageSync('nickName')
    },
    mounted() {

    },
    methods: {
      // 获取后台 企业增值功能是否开启
      getAuthority() {
        getAuthority().then(res => {
          this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
          this.serviceType = res.data.customerServiceType
        }).catch(err => {
          console.log(err)
        })
      },
      // 跳小B客服聊天窗口
      goServiceToB(order) {
        let cId = this.$pt.getStorageSync('customerId')
        let mId = order['memberId']
        if (cId === mId) {
          this.$utils.showToast({
            title: '不能与自己聊天'
          })
        } else {
          this.$pt.navigateTo({url: '/pages/personal/message/detail/main?memberId=' + order.memberId + '&orderId=' + order['orderId'] + '&orderType=' + order.orderType})
        }
      },
      initEls() {
        this.orderFrom = Number(this.getCurrentPage().query.orderFrom)
        let personalType = this.$pt.getStorageSync('personalType')
        // 判断是否为分销商
        let shareType = this.getCurrentPage().query.shareType
        let detail = this.getCurrentPage().query.detail
        if (shareType === '1') {
          this.shareType = true
        } else {
          this.shareType = false
        }
        if (personalType === 0 || detail) {
          this.statusIs = false
        } else if (personalType === 1) {
          this.statusIs = true
        }
        this.getOrder()
        this.messageConfig()
      },
      getOrder() {
        const orderId = this.getCurrentPage().query.orderId
        this.personalType = this.getCurrentPage().query.personalType
        if (!orderId) {
          return
        }
        getProjectOrder(orderId).then((response) => {
          if (response.isError) return
          this.order = response.data
          this.order.statusOverNum = 0
          // 收货人信息
          this.nicknameAdd = response.data.customerNickname
          this.phoneAdd = response.data.customerPhone
          this.addressAdd = response.data.customerAddress
          this.memberAvatar = response.data.memberAvatar
          this.customerServiceType = response.data.customerServiceType ? response.data.customerServiceType : ''
          this.customerServiceFlag = response.data.customerServiceFlag
          switch (this.order.orderStatus) {
            case -2:
              this.orderStatusType = '已取消'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case -1:
              this.orderStatusType = '已取消'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 0:
              this.orderStatusType = '未付款'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
            case 1:
              this.orderStatusType = '待发货'
              if (this.order.orderType === 10) {
                this.orderStatusText = '等待卖家发货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              } else {
                this.orderStatusText = '等待卖家发货'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              }
              break
            case 2:
              this.orderStatusType = '已发货'
              if (this.order.orderType === 10) {
                this.orderStatusText = '物流派送中'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              } else {
                this.orderStatusText = '物流派送中'
                this.orderStatusTips = '如有问题可在下方联系卖家'
              }
              break
            case 3:
              this.orderStatusType = '已收货'
              this.orderStatusText = '订单已收货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 4:
              this.orderStatusType = '已完成'
              this.orderStatusText = '订单已完成'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 20:
              // this.orderStatusType = '部分已发货'
              // this.orderStatusText = '物流派送中'
              // this.orderStatusTips = '如有问题可在下方联系卖家'
              this.orderStatusType = '待发货'
              this.orderStatusText = '等待卖家发货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
          }
          if (this.order.deliveryType === 2) {
            switch (this.order.verifyStatus) {
              case 1:
                this.orderStatusType = '待核销'
                this.orderStatusText = '订单已取消'
                this.orderStatusTips = '如有问题可在下方联系卖家'
                break
              case 3:
                this.orderStatusType = '已收货'
                this.orderStatusText = '等待买家付款'
                this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
                break
              case 4:
                this.orderStatusType = '已完成'
                this.orderStatusText = '等待买家付款'
                this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
                break
            }
          }
          let total = 0
          if (this.order && this.order.orderGoodsList) {
            this.goodsListLen = this.order.orderGoodsList.length
            this.order.orderGoodsList.forEach(goods => {
              let price = goods.goodsPrice * goods.goodsNum
              total += price
            })
          }
          this.goodsTotalPrice = total.toFixed(2)
          this.order.orderGoodsList.forEach((item, index) => {
            if (item.afterSaleStatus === -3 || item.afterSaleStatus === 4 || (item.afterSaleStatus === 3 && (item.afterSaleGoodsNum === item.goodsNum))) {
              this.order.statusOverNum++
            }
          })
        }).catch(() => {
        })
      },
      payOrder() {
        if (this.submitStatus) {
          // 防重复提交
          return
        }
        this.submitStatus = true
        payProjectOrder(this.order.orderId).then(response => {
          if (response.isError) {
            this.submitStatus = false
            return
          }
          const that = this
          const payParams = response.data
          let resType = ''
          if (this.order.orderType === 30) {
            resType = '20'
          } else {
            resType = '10'
          }
          that.$pt.requestPayment({
            'timeStamp': payParams.timeStamp,
            'nonceStr': payParams.nonceStr,
            'package': payParams.package,
            'signType': payParams.signType,
            'paySign': payParams.paySign,
            'success': function(res) {
              that.submitStatus = false
              that.$pt.redirectTo({ url: '/pages/shop/result/main?successFlag=1&price=' + payParams.price +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
            },
            'fail': function(res) {
              console.log(res)
              that.submitStatus = false
              that.$pt.navigateTo({ url: '/pages/shop/result/main?successFlag=0&price=' + payParams.price +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
            }
          })
        })
      },
      linkToDetail(sku) {
        if (this.statusIs) return
        console.log('sku', sku)
        sku.orderId = this.order.orderId
        let value = JSON.stringify(sku)
        this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?sku=${value}`})
      },
      linkToApply(sku) {
        if (this.statusIs) return
        console.log(sku)
        let that = this
        let rejectArr = []
        if (!this.messageIds.length) {
          sku.orderId = this.order.orderId
          let value = JSON.stringify(sku)
          this.$pt.navigateTo({url: `/pages/personal/order/refund-view/main?sku=${value}`})
          return
        }
        this.$pt.requestSubscribeMessage({
          tmplIds: that.messageIds,
          success: function(res) {
            // 成功
            Object.keys(res).forEach(key => {
              if (res[key] === 'reject') {
                rejectArr.push(key)
              }
            })
            if (rejectArr.length) {
              that.messageIds = rejectArr
              that.$utils.showToast({title: '请允许消息通知！'})
            } else {
              sku.orderId = that.order.orderId
              let value = JSON.stringify(sku)
              that.$pt.navigateTo({url: `/pages/personal/order/refund-view/main?sku=${value}`})
            }
          },
          fail(err) {
            // 失败
            console.error(err)
          }
        })
      },
      messageConfig() {
        this.messageIds = []
        const dataArr = ['1202', '1203', '1204']
        let dataStr = dataArr.toString()
        listEnterpriseMessageConfig({
          memberId: this.getMemberId,
          ascriptionTypes: dataStr
        }).then((response) => {
          if (response.isError) return
          response.data.forEach(item => {
            if (item.miniMadeId) {
              this.messageIds.push(item.miniMadeId)
            }
          })
        }).catch(() => {
        })
      },
      cancelOrder() {
        // 取消订单事件
        // 订单里面都没有发货才可以取消订单，到订单取消页面
        // 否则提示联系卖家处理
        if (this.order.orderStatus === 20) return
        if (this.order.orderStatus === 0) {
          const that = this
          this.$pt.showModal({
            title: '温馨提示',
            content: '确认取消订单?',
            success: res => {
              if (res.confirm) {
                cancelOrder({orderId: that.order.orderId, orderFrom: that.orderFrom}).then(response => {
                  if (response.isError) return
                  that.$utils.showToast({ title: '取消成功' })
                  that.order = {}
                  that.getOrder()
                })
              }
            }
          })
        } else {
          checkCancelPaidOrder({orderId: this.order.orderId, orderFrom: this.orderFrom}).then(response => {
            if (response.isError) return
            this.$pt.navigateTo({url: '/pages/personal/order/cancel-order/main?memberId=' + this.order.memberId + '&orderId=' + this.order.orderId})
          })
        }
      },
      doReceiveGoods(order) {
        if (order.orderStatus === 20) return
        const that = this
        this.$pt.showModal({
          content: '是否确认收货？',
          success(res) {
            if (res.confirm) {
              that.order.orderFrom = that.orderFrom
              doReceiveGoods(that.order).then(response => {
                if (response.isError) return
                that.$utils.showToast({ title: '确认收货成功' })
                that.order = {}
                that.getOrder()
              })
            } else if (res.cancel) {
              console.log('用户取消')
            }
          }
        })
      },
      queryExpress() {
        // 物流信息|| this.order.orderStatus === 20
        if (this.order.orderStatus === 2 || this.order.orderStatus === 3 || this.order.orderStatus === 4) {
          this.$pt.navigateTo({ url: '/pages/personal/distribution/order/express/main?orderId=' + this.order.orderId })
        }
      },
      goDetail(item) {
        // 去商品详情页
        this.$pt.navigateTo({ url: `/pages/shop/detail/main?goodsId=${item.goodsId}&goodsType=30` })
      }
    }
  }
</script>

<style lang="less" scoped>
  .customer-bar{
    .contactBtn {
      background-color: transparent!important;
      position: absolute;
      width:100%;
      height:100%;
      left: 0;
      top: 0;
      z-index: 999;
      border-color: transparent!important;
      border: none!important;
    }
    .line{
      border-left: #eeeeee 1px solid;
      height: 30px;
    }
  }
  .border-b-less{
    &:last-child{
      border-bottom: none;
    }
    border-bottom: #f5f5f5 1px solid;
  }
  .font-return-num{
    color: #FF5A00!important;
  }
  .footer-bar{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
  }
  .noraml-btnon{
    display: inline-block;
    color: #333333;
    border-radius: 100px;
    background-color: #fff;
    border: #c2c3c6 1px solid;
  }
  .submit {
    display: inline-block;
    color: #333333;
    border-radius: 100px;
    background-color: #fedc00;
    border: #fedc00 1px solid;
  }
  .income{
    background: #FFE1D1;
    color: #FF5A00;
    font-size: 12px;
    border-radius: 5px;
    padding: 2px 4px;
    line-height: 1;
    display: inline-block;
  }
  .action-btn {
    color: #666;
    background-color: #fff;
    height: 24px!important;
    line-height: 24px!important;
    padding: 0px 15px!important;
    border: 1px solid #e9e9e9;
    border-radius: 50px;
  }
  .contact-seller-img{
    border-radius: 100px;
  }
  .font-red{
    color: #f94035;
  }
  .contact-seller{
    border-radius: 100px;
    border: #999999 1px solid;
    color: #999999;
  }
  .icon-arrow-right{
    color: #999;
  }
  .font-gray{
    color: #999999;
  }
  .border-t{
    border-top: #e4e4e4 1px solid;
  }
  .add-box{
    background: #f8f2cf;
    .font-gray{
      color: #666;
    }
  }
  .add-line-bg{
    background: url('https://veekrayimg.joinsun.vip/images/expree-line.png') repeat-x top;
    background-size: 52px 5px;
    height: 10px;
    width: 100%;
  }
  .type-0{
    background: #fa606c;
    color: #fff;
  }
  .type-1, .type-20{
    background: #ff6600;
    color: #fff;
  }
  .type-2{
    background: #409eff;
    color: #fff;
  }
  .type-3{
    background: #ff6600;
    color: #fff;
  }
  .type-4{
    background: #67c23a;
    color: #fff;
  }
  .type--10, .type--11{
    background: #ff6600;
    color: #fff;
  }
  .type--1, .type--2{
    background: #ff6600;
    color: #fff;
  }
  .border-b{
    border-bottom: #e4e4e4 1px solid;
  }
  .panel{
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: 0 0 3px #ededed;
    border-top: none;
    border-bottom: none;
    position: relative;
  }
  .goods-prop{
    box-sizing: border-box;
    height: 16px;
    line-height: 1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  .goods-title {
    height: 35px;
    font-size: 13px;
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }

  .img-item {
    width: 100px;
    height: 100px;
    border-radius: 2px;
  }

  .bottom-btn {
    width: 100%;
    height: 45px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
  }

  .total {
    width: 60%;
  }  

  .mini-btn {
    color: #f8c400;
    background-color: #fff;
    border-radius: 3px;
    font-size: 11px;
    padding: 0px 10px 0px 10px;
  }

  .mini-btn:after {
    border: 1px solid #f8c400;
  }
  .arrow-right{
    position: absolute;
    right: 15px;
    top: calc(50% - 10px);
  }
  .avatar-img{
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }
  .color-ac{
    color: #FF5A00;
  }
  .font-c-56{
    color: #565656;
  }
  .line-1{
    width: 75px;
  }
  .copy-btn{
    font-size: 13px;
    width: 43px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    border-radius: 3px;
    border: 0.5px solid #CACACA;
    background: white;
  }
  .disabled-order-btn2 {
    background: #dbdbdb !important;
    color: #fff !important;
    border: #dbdbdb 1px solid !important;
  }
</style>
